<template>
  <div>
    <div style="height:80px">
      <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="map.findid" placeholder="方案编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="map.findname" placeholder="执行人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selworkall()">查询</el-button>
      </el-form-item>
    </el-form>
    </div>
    <div>
      <el-table
      :data="page.rows"
      border
      style="width: 100%">
      <el-table-column
        prop="interId"
        label="方案编号"
        width="240"
        align="center">
      </el-table-column>
      <el-table-column
        prop="interTitle"
        label="方案名称"
        width="270"
        align="center">
      </el-table-column>
      <el-table-column
        prop="interExecutePerson"
        label="执行人"
        width="230"
        align="center">
      </el-table-column>
      <el-table-column
        prop="healthManager.hmName"
        label="监督人"
        width="230"
        align="center">
      </el-table-column>
      <el-table-column
      label="操作"
      width="258"
      align="center"
      prop="interId">
      <template slot-scope="scope">
        <el-button type="text" v-if="scope.row.interState == 0" @click="statemethod(scope.row.interId)">执行方案</el-button>
        <el-button type="text" style="color: red" v-if="scope.row.interState == 1" @click="stopmethod(scope.row.interId)">中止执行</el-button>
        <el-button type="text" v-if="scope.row.interState == 0" @click="selworkone(scope.row.interId)">编辑方案</el-button>
        <el-button type="text" v-if="scope.row.interState == 0" @click="delwork(scope.row.interId)">删除方案</el-button>
      </template>
    </el-table-column>
    </el-table>
    </div>
    <div class="block">
      <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 9, 15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>

    <el-dialog
      title="编辑方案"
      :visible.sync="details"
      width="60%"
      :before-close="clearwork"
      center>
        <el-tabs type="card" v-model="activeName">
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="work" size="small" :rules="rules" ref="work" label-width="80px" class="demo-ruleForm">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="方案名称" prop="interTitle">
                    <el-input v-model="work.interTitle"></el-input>
                  </el-form-item>
                  <el-form-item label="开始时间" prop="interStartTime">
                  <el-date-picker
                    v-model="work.interStartTime"
                    type="date"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="干预周期" prop="interPeriod">
                    <el-input v-model="work.interPeriod"></el-input>
                  </el-form-item>
                  <el-form-item label="干预形式" prop="interShape">
                    <el-select v-model="work.interShape">
                      <el-option label="临床干预" value="临床干预" ></el-option>
                      <el-option label="药物干预" value="药物干预" ></el-option>
                      <el-option label="物理干预" value="物理干预" ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="方案模板" >
                    <el-select v-model="work.temid" @change="subtemid()">
                      <el-option label="请选择" value=''></el-option>
                      <el-option v-for="tem in tems" :key="tem.interTempId" :label="tem.interTempTitle" :value="tem.interTempId"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="结束时间" prop="interEndTime">
                    <el-date-picker
                    v-model="work.interEndTime"
                    type="date"
                    :picker-options="downOptions"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item label="定期回访" prop="interReturnVisit">
                    <el-input v-model="work.interReturnVisit"></el-input>
                  </el-form-item>
                  <el-form-item label="预期结果" prop="interTarget">
                    <el-input v-model="work.interTarget"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="干预内容" prop="interContent">
                <el-input type="textarea" v-model="work.interContent"></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="膳食方案" name="second" v-if="work.temid === null || work.temid === ''">
            <el-table
            ref="food"
            :data="foods"
            highlight-current-row
            @current-change="addfood"
            style="width: 100%">
              <el-table-column
              type="index"
              width="50">
              </el-table-column>
              <el-table-column
              prop="foodZongTitle"
              label="方案名称">
              </el-table-column>
              <el-table-column
              prop="foodZongDesc"
              label="方案价格">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="运动方案" name="third" v-if="work.temid === null || work.temid === ''">
            <el-table
            ref="keep"
            :data="keeps"
            highlight-current-row
            @current-change="addkeep"
            style="width: 100%">
              <el-table-column
              type="index"
              width="50">
              </el-table-column>
              <el-table-column
              prop="keepZongTitle"
              label="方案名称">
              </el-table-column>
              <el-table-column
              prop="keepZongDesc"
              label="方案价格">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="健康方案" name="fourth" v-if="work.temid === null || work.temid === ''">
            <el-table
            ref="who"
            :data="whos"
            highlight-current-row
            @current-change="addwho"
            style="width: 100%">
              <el-table-column
              type="index"
              width="50">
              </el-table-column>
              <el-table-column
              prop="tempWhoTitle"
              label="方案名称">
              </el-table-column>
              <el-table-column
              prop="tempWhoDesc"
              label="方案价格">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
        <el-button @click="clearwork()">返 回</el-button>
        <el-button type="primary" @click="upwork">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default ({
  name: 'work',
  data () {
    return {
      details: false,
      activeName: 'first',
      map: {
        index: '',
        findid: '',
        findname: ''
      },
      page: {},
      currentPage: 1,
      pageSize: 5,
      whos: [],
      foods: [],
      keeps: [],
      work: {
        interId: '',
        interTitle: '',
        tempWhoId: '',
        tempKeepId: '',
        tempFoodId: '',
        interStartTime: '',
        interEndTime: '',
        interTarget: '',
        interExecutePerson: '',
        interPeriod: '',
        interReturnVisit: '',
        interShape: '',
        interContent: '',
        hmId: '',
        temid: ''
      },
      tems: [],
      rules: {
        interTitle: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
        interStartTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
        interEndTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
        interTarget: [{ required: true, message: '请填写预期结果', trigger: 'blur' }],
        interPeriod: [{ required: true, message: '请填写干预周期', trigger: 'blur' }],
        interReturnVisit: [{ required: true, message: '请填写定期回访频率', trigger: 'blur' }],
        interShape: [{ required: true, message: '请选择干预方式', trigger: 'change' }],
        interContent: [{ required: true, message: '请填写干预内容', trigger: 'blur' }]
      },
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
      downOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      }
    }
  },
  methods: {
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.selworkall()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.selworkall()
    },
    selworkall () {
      this.map.index = this.currentPage
      this.map.pageSize = this.pageSize
      axios.post('/api/work/selworkall', this.map).then(result => {
        this.page = result.data
      })
    },
    selworkone (id) {
      axios.get('/api/work/selworkone/' + id).then(result => {
        this.work = result.data
        this.details = true
        this.$nextTick(() => {
          let temp1 = null
          this.foods.forEach((e, i) => {
            if (e.foodZongId === this.work.tempFoodId) {
              temp1 = this.foods[i]
            }
          })
          let temp2 = null
          this.keeps.forEach((e, i) => {
            if (e.keepZongId === this.work.tempKeepId) {
              temp2 = this.keeps[i]
            }
          })
          let temp3 = null
          this.whos.forEach((e, i) => {
            if (e.tempWhoId === this.work.tempWhoId) {
              temp3 = this.whos[i]
            }
          })
          this.$refs.food.setCurrentRow(temp1)
          this.$refs.keep.setCurrentRow(temp2)
          this.$refs.who.setCurrentRow(temp3)
          console.log(this.work)
        })
      })
    },
    upwork () {
      this.$refs.work.validate((valid) => {
        if (valid) {
          if ((this.work.tempFoodId !== '' && this.work.tempKeepId !== '' && this.work.tempWhoId !== '') || this.work.temid !== '') {
            let user = JSON.parse(sessionStorage.getItem('user'))
            this.work.hmId = user.hmId
            axios.post('/api/work/upwork', this.work).then(result => {
              if (result.data) {
                this.$message({
                  message: '制定方案成功',
                  type: 'success'
                })
              } else {
                this.$message.error('制定失败，请稍后重试')
              }
              this.clearwork()
              this.selworkall()
            })
          } else {
            if (this.work.tempFoodId === '' && this.work.tempKeepId === '' && this.work.tempWhoId === '') {
              this.$message.error('请分别选择膳食运动方案或者直接选择方案模板')
              this.activetwoName = 'second'
            } else {
              if (this.work.tempFoodId === '') {
                this.$message.error('请选择膳食方案或者直接选择方案模板')
                this.activetwoName = 'second'
              }
              if (this.work.tempKeepId === '') {
                this.$message.error('请选择运动方案或者直接选择方案模板')
                this.activetwoName = 'third'
              }
              if (this.work.tempWhoId === '') {
                this.$message.error('请选择健康方案或者直接选择方案模板')
                this.activetwoName = 'fourth'
              }
            }
          }
        }
      })
    },
    delwork (id) {
      this.$confirm('确定要删除该方案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/api/work/delwork/' + id).then(result => {
          if (result.data) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message.error('删除失败，请稍后重试')
          }
          this.selworkall()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    statemethod (id) {
      this.$confirm('确定要执行该方案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/api/work/statemethod/' + id).then(result => {
          if (result.data) {
            this.$message({
              message: '执行成功',
              type: 'success'
            })
          } else {
            this.$message.error('执行失败，请稍后重试')
          }
          this.selworkall()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消执行'
        })
      })
    },
    stopmethod (id) {
      this.$confirm('确定要中止该方案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/api/work/stopmethod/' + id).then(result => {
          if (result.data) {
            this.$message({
              message: '中止成功',
              type: 'success'
            })
          } else {
            this.$message.error('中止失败，请稍后重试')
          }
          this.selworkall()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消中止'
        })
      })
    },
    selfoodall () {
      axios.post('/api/work/selfoodall').then(result => {
        this.foods = result.data
      })
    },
    selkeepall () {
      axios.post('/api/work/selkeepall').then(result => {
        this.keeps = result.data
      })
    },
    selwhoall () {
      axios.post('/api/work/selwhoall').then(result => {
        this.whos = result.data
      })
    },
    clearwork (work) {
      this.work = {
        interId: '',
        interTitle: '',
        tempWhoId: '',
        tempKeepId: '',
        tempFoodId: '',
        interStartTime: '',
        interEndTime: '',
        interTarget: '',
        interExecutePerson: '',
        interPeriod: '',
        interReturnVisit: '',
        interShape: '',
        interContent: '',
        hmId: '',
        temid: ''
      }
      this.$refs.work.resetFields()
      this.activeName = 'first'
      this.details = false
    },
    addfood (val) {
      this.work.tempFoodId = val.foodZongId
    },
    addkeep (val) {
      this.work.tempKeepId = val.keepZongId
    },
    addwho (val) {
      this.work.tempWhoId = val.tempWhoId
    },
    subtemid () {
      if (this.work.temid !== '') {
        this.work.tempWhoId = ''
        this.work.tempKeepId = ''
        this.work.tempFoodId = ''
      }
    },
    seltemplateall () {
      axios.post('/api/work/seltemplateall').then(result => {
        this.tems = result.data
      })
    }
  },
  created () {
    this.selfoodall()
    this.selkeepall()
    this.selwhoall()
    this.seltemplateall()
    this.selworkall()
  }
})
</script>

<style scoped>

</style>
